import React, { Component } from 'react';
// 加载css
import './App.scss';
// 按需加载模块
// import Bundle from './utils/bundle';
// 页面动画
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
// 加载路由
import {Route, Switch} from "react-router-dom";
// 加载redux
import { connect } from 'react-redux';
// 加载路由页面
import routes from './pages/routes';


// const Demo1 = (props) => (<Bundle load={() => import ('./pages/Demo1/Demo1')}>
//   {(Demo1) => <Demo1 {...props}/>}
// </Bundle>);

class App extends React.Component {
  render() {
    const { redirect } = this.props;
    // console.log('routes',routes);
    return (
      <div className="container">
        <ReactCSSTransitionGroup
          transitionName={redirect.direction}
          component="div"
          className="pages"
          transitionEnterTimeout={300}
          transitionLeaveTimeout={300}>
          <div key={this.props.location.pathname} className="page">
            <Switch location={this.props.location}>
              {routes.map((data, index)=>{
                return <Route path={data.path} exact={data.exact} component={data.component} key={index}/>
              })}
            </Switch>
          </div>
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

// redux 绑定state
const mapStateToProps = (state) => {
  return {
    redirect: state.redirect,
  }
}
// redux 绑定dispath
const mapDispatchToProps = (dispatch) => {
  return {

  }
}

App = connect(mapStateToProps, mapDispatchToProps)(App)
export default App;
